/**
左侧菜单导航栏
*/

<template>
    <div class="side-bar-container">
    <el-menu :router="true">
  <template v-for="item in sidebarMenu">
    <el-sub-menu v-if="item.children && item.children.length" :key="item.name" :index="item.name">
      <template #title>
        <el-icon :size="20">{{ item.icon }}</el-icon>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item v-for="child in item.children" :key="child.name" :index="child.name">
        {{ child.title }}
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item v-else :key="item.name" :index="item.name">
      <el-icon :size="20">{{ item.icon }}</el-icon>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </template>
    </el-menu>
    </div>
</template>

<script setup>

import {usePermissionStore} from '@/stores/permission'
const permissonStore = usePermissionStore()
console.log('permissonStore',permissonStore)
const sidebarMenu = permissonStore.sidebarMenu
console.log('sideBar',permissonStore.sidebarMenu)

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.side-bar-container {
    height: 100%;
}
</style>